<template>
  <el-dialog v-model="shipmentEditWinDialogVisible"
             title="修改常见缺陷" width="50%">
    <template #default>
      <el-form v-model="editShipment" label-width="auto">
        <el-form-item label="验单名称">
          <el-input v-model="editShipment.shipmentName"/>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="editShipment.clientName"/>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="editShipment.number"/>
        </el-form-item>
        <el-form-item label="产品编码">
          <el-input v-model="editShipment.productNumber"/>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="editShipment.productName"/>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="editShipment.model"/>
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="editShipment.unit"/>
        </el-form-item>
        <el-form-item label="发货数量">
          <el-input v-model="editShipment.shipmentNumber"/>
        </el-form-item>
        <el-form-item label="检测数量">
          <el-input v-model="editShipment.testNumber"/>
        </el-form-item>
        <el-form-item label="不合格数">
          <el-input v-model="editShipment.unqualifiedNumber"/>
        </el-form-item>
        <el-form-item label="检测结果">
          <el-input v-model="editShipment.testResult"/>
        </el-form-item>
        <el-form-item label="出货日期">
          <el-date-picker
              v-model="editShipment.shipmentTime"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY/MM/DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="检测日期">
          <el-date-picker
              v-model="editShipment.testTime"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY/MM/DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="检测人员">
          <el-input v-model="editShipment.Inspectors"/>
        </el-form-item>
        <el-form-item label="单据状态">
          <el-input v-model="editShipment.processStatus"/>
        </el-form-item>

      </el-form>
    </template>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelEdit">取消</el-button>
        <el-button @click="editSubmit">确定</el-button>
      </div>
    </template>

  </el-dialog>
</template>
<script setup>
import {ref , watch} from 'vue'
import {ElMessage} from "element-plus";
import shipmentRequest from "@/api/shipment.js";

//声明这个子组件
const emits = defineEmits(['editShipmentComplete','cancelEdit']);
//申明这个子组件的属性
const props = defineProps(['shipmentId']);
//弹窗标记
let shipmentEditWinDialogVisible = ref(false);
//编辑的项目对象
let editShipment = ref({});

//取消编辑按钮事件
function cancelEdit(){
  editShipment = ref({});
  shipmentEditWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelEdit")

}
//提交事件
function editSubmit(){
  shipmentRequest.updateShipmentById(editShipment.value,res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"编辑成功"
      });
      // 触发编辑完成的事件
      emits('editCompletesSSS');
      // 关闭弹窗
      cancelEdit();
    }else{
      ElMessage({
        type:"warning",
        message:"项目编辑失败"
      });
    }
  })
}

//加载项目列表
function loadShipment(){
  shipmentRequest.selectById(props.shipmentId, res=>{
    if (res.data){
      //加载数据
      editShipment.value = res.data;
      console.log(editShipment.value);
      //显示弹窗
      shipmentEditWinDialogVisible.value = true;
    }
  })
}
//侦听器
watch(()=>props.shipmentId,()=>{
  //当props中的defectId发生变化时，就重新加载数据
  if(props.shipmentId){
    loadShipment();
  }
})




</script>